<template>
  <div id="app">
    <dv-full-screen-container>
      <div class="container-header">
        <img src="../src//assets/images/title.png" alt="" />
        <!-- 时间组件 -->
        <my-time class="my-time" />
      </div>
      <div class="container-content">
        <router-view />
      </div>
      <div class="container-footer"></div>
        <ul id="banner">
          <li
            v-for="(item, index) of bannerList"
            :key="index"
            :class="[ activeIndex == index ? 'active' : '' , 'bannerItem'+(index+1) ] "
            class="bannerItem"
            @click="onBannerClick(item)"
          >
            <div class="bannerImg">
              <!-- <img src="../src/assets/images/banner/home.png"/> -->
            </div>
            {{ item.name }}
            <ul class="secondBanner clearfix">
              <li
                v-for="(second, i) of item.children"
                :key="i"
                :class="[ secondActiveIndex === (index+''+i) ? 'active' : '' , 'secondBannerItem'+(i+1) ] "
                class="secondBannerItem"
                @click.stop="onSecondBannerClick(i, second, index)"
              >
                <div class="secondBannerImg"></div>
                {{ second.name }}
              </li>
            </ul>
          </li>
        </ul>
    </dv-full-screen-container>
  </div>
</template>

<script>
import MyTime from '@/components/MyTime/index.vue'
export default {
  components: {
    MyTime
  },
  data() {
    return {
      bannerList: [
        {
          name: "安防应急",
          router: "",
          index: 0,
          children: [
            { name: "实体防护", router: "", index: 0 },
            { name: "出入口控制", router: "", index: 1 },
            { name: "视频监控", router: "Supervisory", index: 2 },
            { name: "违禁品安检", router: "", index: 3 },
            { name: "入侵检测", router: "", index: 4 },
          ],
        },
        {
          name: "人口民生",
          router: "",
          index: 1,
          children: [
            { name: "民生指数", router: "LivelihoodIndex", index: 0 },
            { name: "人口区域", router: "PopulationArea", index: 1 },
            { name: "市政一体化", router: "", index: 2 },
          ],
        },
        {
          name: "水利能源",
          router: "",
          index: 2,
          children: [
            { name: "水利检测", router: "WaterMonitor", index: 0 },
            { name: "能源供给", router: "EnergySupply", index: 1 },
            { name: "能源消耗", router: "EnergyConsumption", index: 2 },
          ],
        },
        {
          name: "主页",
          router: "Home",
          index: 3,
          children: [],
        },
        {
          name: "城市总览",
          router: "",
          index: 4,
          children: [
            { name: "城区服务", router: "", index: 0 },
            { name: "水文地理", router: "Hydrogeography", index: 1 },
            { name: "行政规划", router: "", index: 2 },
          ],
        },
        {
          name: "智慧交通",
          router: "",
          index: 5,
          children: [
            { name: "停车", router: "PullUp", index: 0 },
            { name: "路网", router: "RoadNetwork", index: 1 },
            { name: "公共交通", router: "PublicTransport", index: 2 },
            { name: "人行", router: "", index: 3 },
          ],
        },
        {
          name: "商业经济",
          router: "",
          index: 6,
          children: [
            { name: "旅游服务", router: "", index: 0 },
            { name: "客流分析", router: "PassengerAnalysis", index: 1 },
            { name: "导购终端", router: "", index: 2 },
          ],
        },
      ],
      activeIndex: 3,
      secondActiveIndex: '',
    };
  },
  methods: {
    onBannerClick: function (item) {
      if(item.router) {
        this.$router.push({ name: item.router });
        this.activeIndex = item.index;
        localStorage.setItem("activeIndex", item.index);
        localStorage.setItem("currentBanner", item.router)
      }
    },
    onSecondBannerClick: function (i, item, index) {
      if(item.router) {
        this.$router.push({
          name: item.router,
        });
        this.secondActiveIndex = index+''+i
        this.activeIndex = index
        localStorage.setItem("secondActiveIndex", this.secondActiveIndex);
        localStorage.setItem("activeIndex", index);
        localStorage.setItem("currentBanner", item.router)
      }
    },
  },
  created() {},
  mounted() {
    const currentActiveIndex = localStorage.getItem("activeIndex")
    const currentSecondActiveIndex = localStorage.getItem("secondActiveIndex")
    const currentBanner = localStorage.getItem("currentBanner")
    if(currentActiveIndex) {
      this.activeIndex = currentActiveIndex
    } else {
      this.activeIndex = 3
    }
    if(currentSecondActiveIndex) {
      this.secondActiveIndex = currentSecondActiveIndex
    } else {
      this.secondActiveIndex = ''
    }
    if(currentBanner) {
      this.$router.push({
        name: currentBanner,
      });
    } else {
      this.$router.push({
        name: 'Home',
      });
    }
  },
};
</script>

<style lang="scss">
@import "../src/style/app.scss";
</style>
